<template>
	<div class="">
		<!--<base-header pName="index"></base-header>-->
		<header class="user-head text-center">
			<img class="user-head-img" :src="url+(user.avatar_path)+(user.avatar)" />
			<div class="">
				<span class="user-name">{{user.name?user.name:'姓名'}}</span>
			</div>
		</header>
		<div class="user-main">
			<div @click="jumpUserComment" class="user-main-div user-border-bottom">
				<img class="user-tips" src="../../assets/icon/comment.png" />
				<span class="user-title">我的评论</span>
				<img class="user-ang" src="../../assets/icon/ang.png" />
			</div>
			<div @click="jumpUserMsg" class="user-main-div user-border-bottom">
				<img class="user-tips" src="../../assets/icon/userMsg.svg" />
				<span class="user-title">个人信息</span>
				<img class="user-ang" src="../../assets/icon/ang.png" />
			</div>
			<div @click="jumpUserPassword" class="user-main-div">
				<img class="user-tips" src="../../assets/icon/userSafe.svg" />
				<span class="user-title">账户安全</span>
				<img class="user-ang" src="../../assets/icon/ang.png" />
			</div>
		</div>
		<div @click="exit" class="user-main-div">
			<img class="user-tips" src="../../assets/icon/exit.svg" />
			<span class="user-title">退出登录</span>
		</div>
		<!--底部导航-->
		<home-footer page="user"></home-footer>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	import HomeFooter from "@/components/article/HomeFooter"
	export default {
		name: 'UserCenter',
		components: {
			BaseHeader,
			HomeFooter
		},
		data() {
			return {
				uid: '',
				token: '',
				user: '',
				url: '',
				oss_url: ''
			}
		},
		mounted() {
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
			this.getUser();
		},
		methods: {
			//用户信息
			getUser() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token
				};
				$.post(global.domain + global.API.user_show, data, function(msg) {
					if(msg.error == 0) {
						self.user = msg.data;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
			//跳的文章资讯
			jumpUserComment() {
				this.$router.push({
					path: '/user_comment'
				})
			},
			//跳到我的中心
			jumpUserMsg() {
				this.$router.push({
					path: '/user_msg'
				})
			},
			//跳到医患中心
			jumpUserPassword() {
				this.$router.push({
					path: '/user_password'
				})
			},
			//退出登录
			exit() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token
				};
				$.post(global.domain + global.API.guest_logout, data, function(msg) {
					if(msg.error == 0) {
						localStorage.clear();
						self.$router.push({
							path: '/login'
						});
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			}
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/personal.css";
</style>